<template>
  <div class="cardMain">
    <transition name="cardAnimation">
      <div class="card" v-if="cardShow">
        <div class="icon">
          <img :src="packCard.type === 'imagery' ? packCard.content.eryImg : packCard.content.roleImg" />
        </div>
        <div class="button" v-if="!isTouch" @touchend="cardTouch">{{name}}</div>
        <div class="explain" v-if="isTouch">{{explain}}</div>
        <div class="close" @touchend="closeTouch"></div>
      </div>
    </transition>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex"
export default {
  data() {
    return {
      timer: null,
      isTouch: false,
      cardShow: false
    }
  },
  created() {
    setTimeout(() => {
      this.cardShow = true
    }, 0)
  },
  mounted() {
    // 播放字卡
    this.timer = setTimeout(() => {
      switch (this.packCard.type) {
        case "role":
          this.parseTextAudio({ text: this.packCard.content.roleName })
          break
        case "imagery":
          this.parseTextAudio({ text: this.packCard.content.explain })
          break
        default:
          this.parseTextAudio({ text: "场景" })
          break
      }
    }, 400)
  },
  beforeDestroy() {
    clearTimeout(this.timer)
  },
  computed: {
    name() {
      switch (this.packCard.type) {
        case "imagery":
          return this.packCard.content.explain
          break
        case "role":
          return this.packCard.content.roleName
          break
        default:
          return "场景"
          break
      }
    },
    explain() {
      switch (this.packCard.type) {
        case "imagery":
          return this.packCard.content.introduction
          break
        case "role":
          return "有了我你就可以在创作中说话了哦。"
        default:
          return "有了我你就可以在创作中更换场景了哦。"
          break
      }
    },
    ...mapGetters("packStatus", {
      packCard: "getPackCard"
    })
  },
  methods: {
    cardTouch: function () {
      if(window.location.href.indexOf('communityPicbook') && this.packCard.type !== 'imagery'){
        return
      }
      this.clickMusic()
      this.isTouch = !this.isTouch
      switch (this.packCard.type) {
        case "role":
          this.parseTextAudio({ text: "有了我你就可以在创作中说话了哦。" })
          break
        case "imagery":
          this.parseTextAudio({ text: this.packCard.content.introduction })
          break
        default:
          this.parseTextAudio({ text: "有了我你就可以在创作中更换场景了哦。" })
          break
      }
    },
    closeTouch: function () {
      this.clickMusic()
      this.parseTextAudio({
        play: false
      })
      this.setPackCard(null)
    },
    ...mapActions("packStatus", ["setPackCard"])
  }
};
</script>

<style scoped lang='stylus'>
.cardMain
  position absolute
  width 100%
  height 100%
  z-index 99
  background rgba(0, 0, 0, 0.3)
  .card
    position absolute
    background url($urlTitle + 'index/卡背景.png') 0 0 / 100% 100%
    transition all 0.5s
    $center('WHLT', 12rem, 14rem)
    .icon
      $coord('WHLT', 8rem, 5rem, 2rem, 2rem)
      $alignCenter()
      img
        max-width 90%
        max-height 90%
        border-radius 0.2rem
    .button
      $coord('WHLT', 5rem, 1.8rem, 3.5rem, 9.5rem)
      background url($urlTitle + 'index/卡名称背景.png') 0 0 / 100% 100%
      $alignCenter()
      color white
    .explain
      $coord('WHLT', 8rem, 5rem, 2rem, 8rem)
      text-indent 1.2rem
      color rgb(66, 62, 61)
      font-size 0.8rem
      $alignCenter()
      text-align left
    .close
      $coord('WHRT', 2.5rem, 1.8rem, -2.1rem, 1rem)
      background url($urlTitle + 'index/卡关闭.png') 0 0 / 100% 100%
.cardAnimation-enter-active
  animation card-in 0.3s
@keyframes card-in
  0%
    left calc(var(--touchX) - var(--X))
    top calc(var(--touchY) - var(--Y))
    transform scale(0)
  100%
    left 50%
    top 50%
    transform scale(1)
</style>
